<template>
  <view class="dating-container">
    <view class="header">
      <text class="title">拾缘</text>
    </view>

    <view class="feature-section">
      <text class="section-title">缘分匹配</text>
      <view class="matching-card">
        <view class="card-header">
          <image src="/static/logo.png" class="card-avatar" mode="aspectFill"></image>
          <view class="card-info">
            <text class="card-name">小明</text>
            <text class="card-detail">25岁 · 男 · 北京</text>
          </view>
          <view class="distance">500m</view>
        </view>
        <view class="card-content">
          <text class="card-desc">喜欢旅行和摄影，寻找志同道合的朋友...</text>
        </view>
        <view class="card-tags">
          <text class="tag">旅行</text>
          <text class="tag">摄影</text>
          <text class="tag">美食</text>
        </view>
        <view class="card-actions">
          <view class="action-btn dislike">
            <text class="icon">×</text>
          </view>
          <view class="action-btn super">
            <text class="icon">💖</text>
          </view>
          <view class="action-btn like">
            <text class="icon">✓</text>
          </view>
        </view>
      </view>
    </view>

    <view class="feature-section">
      <text class="section-title">推荐好友</text>
      <view class="friends-list">
        <view class="friend-item" v-for="(friend, index) in friends" :key="index">
          <image :src="friend.avatar" class="friend-avatar" mode="aspectFill"></image>
          <view class="friend-info">
            <text class="friend-name">{{ friend.name }}</text>
            <text class="friend-detail">{{ friend.age }}岁 · {{ friend.gender === 'male' ? '男' : '女' }} · {{
              friend.location }}</text>
          </view>
          <button class="add-btn">+</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const friends = ref([
  {
    avatar: '/static/logo.png',
    name: '小红',
    age: 23,
    gender: 'female',
    location: '上海'
  },
  {
    avatar: '/static/logo.png',
    name: '小李',
    age: 26,
    gender: 'male',
    location: '广州'
  },
  {
    avatar: '/static/logo.png',
    name: '小张',
    age: 24,
    gender: 'female',
    location: '深圳'
  }
]);

onLoad(() => {
  console.log('拾缘页面加载');
});
</script>

<style scoped>
.dating-container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 44rpx;
  font-weight: bold;
  color: #333;
}

.feature-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.matching-card {
  background-color: white;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.card-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.card-info {
  flex: 1;
}

.card-name {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.card-detail {
  font-size: 26rpx;
  color: #666;
}

.distance {
  font-size: 28rpx;
  color: #6d4aff;
}

.card-content {
  margin-bottom: 30rpx;
}

.card-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 40rpx;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.tag {
  background-color: #f5f5f5;
  color: #666;
  font-size: 26rpx;
  padding: 10rpx 30rpx;
  border-radius: 50rpx;
}

.card-actions {
  display: flex;
  justify-content: center;
  gap: 40rpx;
}

.action-btn {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.action-btn.dislike {
  background-color: #fff;
  border: 2rpx solid #ff6b6b;
}

.action-btn.super {
  background-color: #fff;
  border: 2rpx solid #ff9f43;
}

.action-btn.like {
  background-color: #fff;
  border: 2rpx solid #1dd1a1;
}

.action-btn .icon {
  font-size: 44rpx;
}

.action-btn.dislike .icon {
  color: #ff6b6b;
}

.action-btn.super .icon {
  color: #ff9f43;
}

.action-btn.like .icon {
  color: #1dd1a1;
}

.friends-list {
  background-color: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.friend-item:last-child {
  border-bottom: none;
}

.friend-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.friend-info {
  flex: 1;
}

.friend-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.friend-detail {
  font-size: 24rpx;
  color: #666;
}

.add-btn {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #6d4aff;
  color: white;
  border-radius: 50%;
  font-size: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
</style>